<template>
  <a-tabs v-model:activeKey="activeKey" type="card" size="small">
    <a-tab-pane v-for="el in tabData" :key="el.key" :tab="el.name">
      <a-skeleton v-if="el.loading" loading active :avatar="false"></a-skeleton>
      <a-tree
        v-else-if="el.data.length > 0"
        v-model:checked-keys="el.checkedKeys"
        :tree-data="el.data"
        block-node
        show-line
        show-icon
        default-expand-all
        checkable
        :field-names="el.fieldNames"
      >
      </a-tree>
      <sl-empty v-else></sl-empty>
    </a-tab-pane>
  </a-tabs>
</template>
<script setup lang="ts">
import { ref, watch, nextTick } from "vue";
import { DeptItem, DeptType, DictTypeCode, DataGroupItem } from "/@/api/main/system/models";
import { getDeptList, getDictOptions } from "/@/api/main/system";
import { SelectOptionItem } from "/@/types/antd";
import { uniq } from "lodash-es";
import { TabItem, TabKey, getTabData } from "./tabData";
import { findItemByKey } from "/@/utils/treeData";

const props = defineProps<{
  value: DataGroupItem["dataIds"] | null;
}>();

const emits = defineEmits(["change"]);

const activeKey = ref<TabKey>("company");
const tabData = ref<TabItem[]>(getTabData());
//处理冗余checkkeys
function handleCheckkeys(data: SelectOptionItem[] | DeptItem[], key: TabKey) {
  let target = tabData.value.find((el) => el.key === key);
  if (target) {
    const checkedKeys = [...target.checkedKeys];
    for (let i = checkedKeys.length - 1; i >= 0; i--) {
      const re = findItemByKey(data as DeptItem[], checkedKeys[i], {
        keyName: key === "company" || key === "cooperation" ? "id" : "value",
        childrenKey: "children",
      });
      if (!re) {
        checkedKeys.splice(i, 1);
      }
    }
    target.checkedKeys = checkedKeys;
    let other: TabItem | undefined = void 0;
    if (key === "company" || key === "cooperation") {
      other = tabData.value.find((el) => el.key === (key === "company" ? "cooperation" : "company"));
    } else {
      other = tabData.value.find((el) => el.key === (key === "category" ? "region" : "category"));
    }
    if (other) {
      const checkedKeys = [...other.checkedKeys];
      for (let i = checkedKeys.length - 1; i >= 0; i--) {
        const re = findItemByKey(data as DeptItem[], checkedKeys[i], {
          keyName: key === "company" || key === "cooperation" ? "id" : "value",
          childrenKey: "children",
        });
        if (re) {
          checkedKeys.splice(i, 1);
        }
      }
      other.checkedKeys = checkedKeys;
    }
  }
}
watch(
  activeKey,
  async (key) => {
    let target = tabData.value.find((el) => el.key === key);
    if (target) {
      if (target.data.length === 0) {
        target.loading = true;
        let data: SelectOptionItem[] | DeptItem[] | null | undefined = [];
        if (key === "company" || key === "cooperation") {
          data = await getDeptList({ type: target.type as DeptType });
        } else {
          data = await getDictOptions({ typeCode: target.type as DictTypeCode });
        }
        target.loading = false;
        if (data) {
          //处理冗余checkkeys
          handleCheckkeys(data, key);
          target.data = data;
        }
      } else {
        handleCheckkeys(target.data, key);
      }
    }
  },
  { immediate: true }
);

let trigger = true;
watch(
  () => props.value,
  (obj) => {
    if (!trigger) return;
    for (let i = 0; i < tabData.value.length; i++) {
      const item = tabData.value[i];
      const key = item.key;
      if (key === "company" || key === "cooperation") {
        item.checkedKeys = obj ? obj.deptIds : [];
      } else {
        item.checkedKeys = obj ? obj.dictIds : [];
      }
    }
  }
);

watch(
  tabData,
  (data) => {
    trigger = false;
    let deptIds: number[] = [];
    let dictIds: number[] = [];
    data.forEach((item) => {
      const key = item.key;
      if (key === "company" || key === "cooperation") {
        deptIds = deptIds.concat(item.checkedKeys);
      } else {
        dictIds = dictIds.concat(item.checkedKeys);
      }
    });
    // console.log("=====>tabdata watch", deptIds);
    emits("change", {
      dictIds: uniq(dictIds),
      deptIds: uniq(deptIds),
    });
    nextTick(() => {
      trigger = true;
    });
  },
  { deep: true }
);
</script>
